<template>
    <div class="download-wrap">
        <ul class="info-field">
            <li>
                <div>文件名称：<em>{{ data.path }}</em></div>
            </li>
            <li>
                <div>简码：<em class="bright">{{ data.code }}</em></div>
            </li>
            <li>
                <div>文件大小：<em>{{ data.size }}</em></div>
            </li>
            <li>
                <div>创建时间：<em>{{ data.create_at }}</em></div>
            </li>
            <li>
                <div>下载次数：<em>{{ data.download_count }}</em></div>
            </li>
            <li>
                <el-button class="w-100" type="primary" @click="downloadFile">
                    点击下载
                </el-button>
            </li>
            <li class="text-center">
                <qrcode-vue :value="copyValue" size="200"/>
            </li>
            <li>
                <el-button
                    class="w-100 mt-3"
                    type="primary"
                    @click="copyContent"
                >
                    复制链接
                </el-button>
            </li>
            <li>
                <el-button class="w-100" type="primary" @click="createAgain">
                    我也要上传
                </el-button>
            </li>
            <li>
                <el-button class="w-100" type="danger" @click="removeFile">
                    删除文件
                </el-button>
            </li>
        </ul>
    </div>
</template>

<script>
import { deleteTransferRecord } from '@/api';

export default {
    name: 'Download',
    props: {
        data: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            copyValue: location.href
        }
    },
    methods: {
        downloadFile() {
            window.open(`/api/download?uid=${this.data.id}&filename=${this.data.name}`, '_blank');
            this.$emit('refresh');
        },
        createAgain() {
            location.replace('/');
        },
        removeFile() {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteTransferRecord(this.data.id);
            });
        },
        copyContent() {
            this.$copyText(this.copyValue).then(() => {
                this.$message('复制成功');
            }, () => {
                this.$message('复制失败');
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.download-wrap {
    .info-field {
        li {
            font-size: 15px;
            padding: 15px 0;
            border-bottom: 1px solid #EFEFEF;

            em {
                color: #409EFF;
            }

            em.bright {
                color: #C11686;
                font-size: 30px;
                font-weight: 600;
            }
        }
    }
}
</style>
